Approach Set a selected option using [selected] property

Approach 1. Set a selected option using [(ngModel)]

Here we will be using [selected] property binding on each option, to set the selected option based on the condition. Here we directly set the selected attribute on each option element based on a comparison with the selectedValue property in our component. This approach is simpler and only requires setting the initial selected value.

Syntax :

<select>
    <option [selected]="selectedValue==='option1'" value="option1">Option 1 </option>
    <option [selected]="selectedValue==='option2'" value="option2">Option 2 </option>
    <option [selected]="selectedValue==='option3'" value="option3">Option 3 </option>
</select>

This approach directly sets the selected value in the dropdown listt based on the value given for `selectedValue` in our component class. Lets look at an example:

Example:

HTML

<!-- app.component.html -->

<div>
    <select>
        <option [selected]="color === 'red'" value="red">Red</option>
        <option [selected]="color === 'green'" value="green">Green</option>
        <option [selected]="color === 'black'" value="black">Black</option>
        <option [selected]="color === 'white'" value="white">White</option>
    </select>
    <p>Selected Color : {{ color }}</p>
</div>

JavaScript

//app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    color: string = 'green';
}

Output:

Here we are using [selected] property binding to each option, with the condition which compares color variable to value of each option. We gave the value of color variable to green, so it automatically sets the default value of drop down list to green , as this is not the two-way binding, even though we are changing the selected option, it is not updating the variable , hence we can only see `Selected Color : green` .

How to set a Selected Option of a Dropdown List control using Angular ?

In Angular, a select or dropdown list is a common UI component that allows users to choose a single value from a predefined set of options. Angular select allows us to bind the dropdown list to a data source, such as an array or an object, using directives like `*ngFor`. It allows 2-way data binding using [(ngModel)] directive. Angular also provides us with Event Handling functions like (change), (selectionChange), etc, which allows us to handle events triggered by the dropdown list such as changing the selected option.

In this article, we will see how to set a selected option of a dropdown list control.

Table of Content

Set a selected option using [(ngModel)]
Set a selected option using [selected] property

Tags:

#AngularJS-Questions #AngularJS #Web Technologies